﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link type="text/css" rel="Stylesheet" href="Styles/HomeCss.css" />
 	<link type="text/css" href="Styles/JQuery/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
	<script type="text/javascript" src="Scripts/JQuery/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="Scripts/JQuery/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/ui/jquery.effects.core.js"></script> 
	<script type="text/javascript" src="http://jqueryui.com/ui/jquery.effects.scale.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/ui/jquery.effects.fold.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script  type="text/javascript" src="http://www.vietbando.com/maps/API/VBDMapAPI.js?key=e7vjH+pgQHuSyV75dwG6hrMsaf8BwyZA"></script>
    
    <script type="text/javascript" src="Scripts/Home/SetValueToControl.js"></script>
    <script type="text/javascript" src="Scripts/Home/Variable.js"></script>
    <script type="text/javascript" src="Scripts/Home/JS.js"></script>
    <script type="text/javascript" src="Scripts/Home/Services.js"></script>
    <script type="text/javascript" src="Scripts/Home/Map.js"></script>  
    <script type="text/javascript" src="Scripts/Home/Return.js"></script>
    <script type="text/javascript" src="Scripts/Home/Control.js"></script>



     <script type="text/javascript">
         $(document).ready(function () {
             $("#accordion").accordion({ header: "h4" });
             $("#accordion1").accordion({ header: "h4" });
            
             $("#slider1").slider();
             $("#slider2").slider();

           

             $("#slider3").slider();
             $("#slider4").slider();


          
        
             // run the effect
             
            

             //callback function to bring a hidden box back
             function callback() {

             };
         });


         $(function () {

             $("#slider1").slider({ max: 18 });
             $("#slider2").slider({ max: 2000 });

             $("#slider1").slider({ min: 0 });
             $("#slider2").slider({ min: 100 });

             $("#slider1").slider("value", 2);
             $("#slider2").slider("value", 2);

             $("#slider3").slider({ max: 18 });
             $("#slider4").slider({ max: 2000 });

             $("#slider3").slider({ min: 0 });
             $("#slider4").slider({ min: 100 });

             $("#slider3").slider("value", 2);
             $("#slider4").slider("value", 2);

             $("#slider1").slider({
                 slide: function (event, ui) {

                     document.getElementById("txtHeSoDiBo1").value = ui.value * 100;

                 }
             });
             $("#slider2").slider({
                 slide: function (event, ui) { document.getElementById("txtHeSoChuyenTuyen1").value = ui.value; }
             });
             $("#slider3").slider({
                 slide: function (event, ui) {

                     document.getElementById("txtHeSoDiBo2").value = ui.value * 100;
                 }
             });
             $("#slider4").slider({
                 slide: function (event, ui) { document.getElementById("txtHeSoChuyenTuyen2").value = ui.value; }
             });
             // Tabs
             $('#tabs').tabs();
             // Dialog			
             $('#dialog').dialog({
                 autoOpen: false,
                 width: 300,
                 height: 250,
                 buttons: {
                     "Cancel": function () {
                         $(this).dialog("close");
                     }
                 }
             });
             // Dialog Link
             $('#buttonTim1').click(function () {
                 document.getElementById("content").innerHTML = "";
                 if (pointA != null && pointB != null) {
                     _findPathBetweenTwoStation1(false, "imgFind");
                 }

                 return false;
             });

             $('#_buttonTim1').click(function () {
                 document.getElementById("content").innerHTML = "";
                 if (pointA != null && pointB != null) {
                     _findPathBetweenTwoStation1(true, "imgFind1");
                 }

                 return false;
             });


             $('#buttonTim2').click(function () {
                 document.getElementById("content").innerHTML = "";

                 _findPathBetweenTwoStation(false, "imgFind2");

                 return false;
             });

             $('#_buttonTim2').click(function () {
                 document.getElementById("content").innerHTML = "";
                 _findPathBetweenTwoStation(true, "imgFind3");

                 return false;
             });
         });

         $(window).resize(function () {

             document.getElementById("search").style.width = "320px";
             document.getElementById("split").style.width = "10px";
             document.getElementById("map").style.width = $(window).width() - 335 + "px";
             document.getElementById("container").style.width = $(window).width() - 335 + "px";
         });
     </script>
     <style type="text/css">
			/*demo page css*/
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}
		</style>	
</head>
<body onload="   loadMap(); _getAllStation();" >
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
	    <Services>
		    <asp:ServiceReference Path="~/BusService.asmx"/>
	    </Services>
    </asp:ScriptManager>
    <div>
         <div id="header">
         <img src="Images/Banner.png" alt="" width="100%" />
         </div>
         <div id="body">
            <table id="tbBody" border="0px" cellspacing="0px" width="100%" style="position: absolute">
                <tr>
                    <td id="search" style="width:300px" >
                    		<!-- Accordion -->
		
		
                        <div id="contain" style="position: absolute; width:98.5%">
                            <div id="tabs">
			                    <ul>
				                    <li><a href="#tabs-1">Tìm kiếm địa chỉ</a></li>
				                    <li id="TimID"><a href="#tabs-2">Tìm kiếm tọa độ</a></li>
<%--				                    <li><a href="#tabs-3">Third</a></li>--%>
			                    </ul>
			                    <div id="tabs-1"> 
                                <div id="accordion">
			<div>
				<h4><a href="#">Mặc định</a></h4>
				<div>
                        <table width="100%" style=" height:50px;" >
                                            <tr>
                                                <td>
                                                     <b>Bắt đầu:</b>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><img src="Images/A.png" width="13%" style=" float:left" alt=""  />
                                                    <input id="txtBatDau" type="text" value="125, Đinh Bộ Lĩnh" class="input" onkeypress="document.getElementById('imgBatDau').src = 'Images/btSearch.png'"/>
                                                    <img id="imgBatDau" src="Images/btSearch.png" alt="" style=" float:right; cursor: pointer" onclick="ConvertAddressToLngLat(document.getElementById('txtBatDau').value,1,'imgBatDau')"/><br />
<%--                                                    <font style="color:Red; font-size:8pt; font-style:italic">Định dạng địa chỉ:Số nhà, Tên đường, Phường, Quận, Thành phố</font>--%>
                                                 </td>

                                            </tr>
                                            <tr>
                                                <td>
                                                    <b>Kết thúc:</b>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>   <img src="Images/B.png" width="13%" alt="" style=" float:left" />
                                                       <input id="txtKetThuc" type="text"  value="200, Điện Biên Phủ" class="input"  onkeypress="document.getElementById('imgKetThuc').src = 'Images/btSearch.png'"/>
                                                       <img  id="imgKetThuc" src="Images/btSearch.png" alt="" style="float:right;cursor: pointer" onclick="ConvertAddressToLngLat(document.getElementById('txtKetThuc').value,2,'imgKetThuc')" />
                                                     
                                          <%--             <font style="color:Red; font-size:8pt; font-style:italic">Định dạng địa chỉ:Số nhà, Tên đường, Phường, Quận, Thành phố</font>--%>
                                                </td>
                        
                                            </tr>
                                                         
                                            <tr>
                                                <td> 
                                                <a><div id="buttonTim1"  class="btnjForm"><img src="Images/point.png" /><div class="bttim">Tìm&nbsp;&nbsp;</div></div>   </a>
		                                           <img  id="imgFind" src="" alt=""  />
                                                   <%-- <a href="#" id="dialog_link" class="btnjForm"><span class="tim"></span>Tìm</a>		--%>
		                                            <!-- ui-dialog -->
		                                            <div id="dialog" title="Chi tiết đường đi giữa hai địa điểm" style=" width:100px;">
			                                            <p id="content"></p>
		                                            </div>
                                               </td>
                                            </tr>
                                    </table>

                </div>
			</div>
			<div>
				<h4><a href="#">Nâng cao</a></h4>
				<div>
                 <table width="100%" >
                                            <tr>
                                                <td>
                                                     <b>Bắt đầu:</b>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><img src="Images/A.png" width="13%" style=" float:left" alt=""  />
                                                   
                                                     <input id="_txtBatDau" type="text" value="125, Đinh Bộ Lĩnh" class="input" onkeypress="document.getElementById('_imgBatDau').src = 'Images/btSearch.png'"/>
                                                    <img id="_imgBatDau" src="Images/btSearch.png" alt="" style=" float:right;cursor: pointer" onclick="ConvertAddressToLngLat(document.getElementById('_txtBatDau').value,1,'_imgBatDau')"/><br />
<%--                                                    <font style="color:Red; font-size:8pt; font-style:italic">Định dạng địa chỉ:Số nhà, Tên đường, Phường, Quận, Thành phố</font>--%>
                                                 </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <b>Kết thúc:</b>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>   <img src="Images/B.png" width="13%" alt="" style=" float:left" />
                                                     
                                         <input id="_txtKetThuc" type="text"  value="200, Điện Biên Phủ" class="input"  onkeypress="document.getElementById('_imgKetThuc').src = 'Images/btSearch.png'"/>
                                                       <img  id="_imgKetThuc" src="Images/btSearch.png" alt="" style="float:right;cursor:pointer" onclick="ConvertAddressToLngLat(document.getElementById('_txtKetThuc').value,2,'_imgKetThuc')" />
                     
                                          <%--             <font style="color:Red; font-size:8pt; font-style:italic">Định dạng địa chỉ:Số nhà, Tên đường, Phường, Quận, Thành phố</font>--%>
                                                </td>
                        
                                            </tr>
                                          <tr>
                                                <td><b>Bạn có thể đi bộ: </b>
                                                 <input id="txtHeSoDiBo1" readonly="readonly" type="text" value="200" style="width:50px;"/>m<br />
                                                 <div id="slider1" style="width:250px;"></div>
                                                </td>
                                                  
                                            </tr>
                                            <tr>
                                                <td>
                                                    <table width="100%" >
                                                        <tr>
                                                            <td  align="left">0m</td>

                                                            <td  align="right">500m</td>

                                                            <td  align="right">1000m</td>

                                                            <td align="right">2000m</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><b>Chi phí</b> 
                                                <input id="txtHeSoChuyenTuyen1" readonly="readonly" type="hidden"  value="200" style="width:45px;"/><br />
                                                <div id="slider2"  style="width:250px;"></div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <table width="100%" >
                                                        <tr>
                                                            <td  align="left">Đường đi<br />ngắn nhất</td>

                                                            <td  align="right"></td>

                                                            <td  align="right"></td>

                                                            <td align="right">Chi phí<br />thấp nhất</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>                       
                                            <tr>
                                                <td> 
                                                <a><div id="_buttonTim1"  class="btnjForm"><img src="Images/point.png" /><div class="bttim">Tìm&nbsp;&nbsp;</div></div>   </a>
		                                          <img  id="imgFind1" src="" alt=""  />
                                                   <%-- <a href="#" id="dialog_link" class="btnjForm"><span class="tim"></span>Tìm</a>		--%>
		                                            <!-- ui-dialog -->
		                                            <div id="Div4" title="Chi tiết đường đi giữa hai địa điểm" style=" width:100px;">
			                                            <p id="P1"></p>
		                                            </div>
                                               </td>
                                            </tr>
                                    </table>

                </div>
			</div>
		
		</div>
                                                                
                                </div>

			                    <div id="tabs-2">
                                
		<div id="accordion1">
			<div>
				<h4><a href="#">Mặc định</a></h4>
				<div>
                  <table width="100%">
                                        <tr>
                                            <td><b>Bắt đầu</b> <br /> <img src="Images/A.png" width="13%" style=" float:left" alt=""  />
                                                    <input id="IDTramBatDau" type="text" class="input"/><br />

                                            </td>
                                        </tr>
                                         <tr>
                                            <td><b>Kết thúc</b> <br /> <img src="Images/B.png" width="13%" style=" float:left" alt=""  />
                                                    <input id="IDTramKetThuc" type="text" class="input" onclick=""/><br />

                                            </td>
                                        </tr>
                                      
                                        <tr>
                                            <td>
                                                 <a><div id="buttonTim2"  class="btnjForm"><img src="Images/point.png" /><div class="bttim">Tìm&nbsp;&nbsp;</div></div>   </a>
                                                <img  id="imgFind2" src="" alt=""  />
                                             </td>
                                        </tr>
                                    </table>
                </div>
			</div>
			<div>
				<h4><a href="#">Nâng cao</a></h4>
				<div>                  <table width="100%">
                                        <tr>
                                            <td><b>Bắt đầu</b> <br /> <img src="Images/A.png" width="13%" style=" float:left" alt=""  />
                                                    <input id="IDTramBatDau1" type="text" class="input"/><br />

                                            </td>
                                        </tr>
                                         <tr>
                                            <td><b>Kết thúc</b> <br /> <img src="Images/B.png" width="13%" style=" float:left" alt=""  />
                                                    <input id="IDTramKetThuc1" type="text" class="input" onclick=""/><br />

                                            </td>
                                        </tr>
                                         <tr>
                                                <td><b>Bạn có thể đi bộ: </b>
                                                   <input id="txtHeSoDiBo2" type="text" readonly="readonly" value="200" style="width:50px;"/><br />
                                                 <div id="slider3"  style="width:250px;"></div>
                                            
                                                </td>
                                         </tr>
                                          <tr>
                                                <td>
                                                    <table width="100%" >
                                                        <tr>
                                                            <td  align="left">0m</td>

                                                            <td  align="right">500m</td>

                                                            <td  align="right">1000m</td>

                                                            <td align="right">2000m</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                         <tr>
                                                <td><b>Chi phí</b> 
                                                <input id="txtHeSoChuyenTuyen2"  type="hidden"  readonly="readonly" value="200" style="width:50px;"/><br />
                                                <div id="slider4"  style="width:250px;"></div>
                                                </td>
                                         </tr> 
                                          <tr>
                                                <td>
                                                    <table width="100%" >
                                                        <tr>
                                                            <td  align="left">Đường đi <br />ngắn nhất</td>

                                                            <td  align="right"></td>

                                                            <td  align="right"></td>

                                                            <td align="right">Chi phí <br />thấp nhất</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        <tr>
                                            <td>
                                                 <a><div id="_buttonTim2"  class="btnjForm"><img src="Images/point.png" /><div class="bttim">Tìm&nbsp;&nbsp;</div></div>   </a>
                                                    <img  id="imgFind3" src="" alt=""  />
                                             </td>
                                        </tr>
                                    </table></div>
			</div>
			
		</div>
                                  
                                </div>
<%--			                    <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
--%>		                    </div>

                        </div>
                    </td>
                     <td id="split">
                        <img src="Images/moveicon.png" onclick="closeAndopen()"  style=" margin-right:0px; border-right-width:0px"  />
                     </td>
                     <td id="map">
                        <div id="container" style=" width:1015px;">
                        
                        </div>
                    </td>

                </tr>

                  
           
                 
            </table>
         </div>
    </div>
    </form>
</body>
</html>
